function enbleDrag(el) {
    let x0,y0
    let ex = 0, ey = 0
    let move = e => {
        let [ dx, dy] = [e.clientX - x0, e.clientY - y0]
        el.style.transform = `translate3d(${ex + dx}px, ${ey + dy}px, 0)`
    }
    let up = e =>{
        document.removeEventListener("mousemove",move)
        document.removeEventListener("mouseup", up)
        let [ dx, dy] = [e.clientX - x0, e.clientY - y0]
        el.style.transform = `translate3d(${ex + dx}px,${ey + dy}px, 0)`
        ex += dx, ey += dy
    }
    el.addEventListener('mousedown', e=> {
        [x0,y0] = [e.clientX, e.clientY]
        document.addEventListener('mousemove',move)
        document.addEventListener('mouseup',up)
    })
}

enbleDrag(document.getElementById('box'))